<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>组基础信息</title>
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <script src="/static/layui/layui.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/FileSaver.min.js"></script>
    <link rel="shortcut icon" href="/static/groupcheck.ico"/>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree layui-nav-side">
                <li class="layui-nav-item"><a href="/groupstat">组信息</a></li>
                <li class="layui-nav-item layui-this"><a href="javascript:;">组域名统计</a></li>
            </ul>
        </div>
    </div>
    <div class="layui-body" style="top:15px;">
        <div style="padding-left: 16px;padding-right: 16px;">
            <form class="layui-form layui-row layui-col-space16">
                <div class="layui-col-md9">
                    <div class="layui-input-wrap">
                        <label class="layui-form-label">日期范围：</label>
                        <div class="layui-btn-group">
                            <button type="button" class="layui-btn layui-btn-primary" value="0">今日</button>
                            <button type="button" class="layui-btn layui-btn-primary" value="-1">昨日</button>
                            <button type="button" class="layui-btn layui-btn-primary" value="-2">前日</button>
                            <button type="button" class="layui-btn" value="0-3">近3天</button>
                            <button type="button" class="layui-btn layui-btn-primary" value="0-5">近5天</button>
                            <button type="button" class="layui-btn layui-btn-primary" value="0-7">近7天</button>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-username"></i>
                            </div>
                            <select lay-search="" name="group_no" id="group_no">
                                <option value="">请选择组号</option>
                                <?php if (!empty($group_nos)) {
                                    foreach ($group_nos as $gno) {
                                        ?>
                                        <option value="<?php echo $gno; ?>"><?php echo $gno; ?></option>
                                    <?php }
                                } ?>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <input type="text" name="domain" id="domain" value="" placeholder="域名" class="layui-input"
                                   lay-affix="clear">
                            <input type="hidden" name="date_range" id="date_range" value="0-3">
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn" lay-submit lay-filter="table-search">搜索</button>
                            <button type="reset" class="layui-btn layui-btn-primary">清除</button>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <button type="button" id="exportExcel" class="layui-btn layui-bg-blue"><i
                                class="layui-icon layui-icon-export"></i>导出高IP域名
                    </button>
                </div>
            </form>
            <table class="layui-hide" id="table-list" lay-filter="table-list"></table>
        </div>
    </div>
</div>
<script>
    layui.use(['table', 'dropdown'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;

        document.querySelectorAll('.layui-btn-group button').forEach(function (button, index) {
            button.onclick = function () {
                $(".layui-btn-group button").addClass('layui-btn layui-btn-primary')

                var value = this.value;
                $("#date_range").val(value);
                button.attributes.class.value = 'layui-btn'
            }
        });

        // 搜索提交
        form.on('submit(table-search)', function (data) {
            var field = data.field; // 获得表单字段
            // 执行搜索重载
            table.reload('table-list', {
                url: '/groupstat/getDomainsData',
                method: 'post',
                page: {
                    curr: 1, // 重新从第 1 页开始
                    limit: 20,
                },
                where: field // 搜索的字段
            });
            return false; // 阻止默认 form 跳转
        });

        // 创建渲染实例
        table.render({
            title: '组域名统计信息',
            elem: '#table-list',
            url: '/groupstat/getDomainsData',
            method: 'post',
            cellMinWidth: 80,
            totalRow: false, // 开启合计行
            page: true,
            limit: 20,
            autoSort: false, // 是否由组件自动进行前端排序
            cols: [[
                {field: 'id', fixed: 'left', width: 80, title: 'ID'},
                {field: 'group_no', width: 120, title: '组号'},
                {field: 'domain', width: 300, maxWidth: 400, title: '域名'},
                {field: 'num_pv', title: 'PV', sort: true},
                {field: 'total_pv', title: '总PV'},
                {field: 'rate_pv', title: 'PV比例', sort: true},
            ]],
            error: function (res, msg) {
                console.log(res, msg)
            }
        });

        // 重新排序
        table.on('sort(table-list)', function (obj) {
            // 尽管我们的 table 自带排序功能，但并没有请求服务端。
            // 有些时候，你可能需要根据当前排序的字段，重新向后端发送请求，从而实现服务端排序，如：
            var where = {
                group_no: obj.config.where.group_no,
                domain: obj.config.where.domain,
                date_range: obj.config.where.date_range,
                sort_field: obj.field,
                sort_order: obj.type
            }
            table.reload('table-list', {
                url: '/groupstat/getDomainsData',
                method: 'post',
                initSort: obj, // 记录初始排序，如果不设的话，将无法标记表头的排序状态。
                where: where,
                page: {
                    curr: 1, // 重新从第 1 页开始
                    limit: 20,
                },
            });
        });

        // 导出Excel按钮事件
        $('#exportExcel').click(function () {
            axios.create({
                timeout: 20000,
                responseType: 'blob'
            }).post('/groupstat/exportDomainsData', {
                group_no: $("#group_no").val(),
                domain: $("#domain").val(),
                date_range: $("#date_range").val(),
            }).then((response) => {
                if (response.headers['content-type'] == 'application/json; charset=utf-8') {
                    alert('数据接口错误，请联系管理员');
                    return false
                }
                const contentDisposition = response.headers['content-disposition'];
                const filename = contentDisposition.split(';')[1].split('filename=')[1].trim();
                saveAs(new Blob([response.data]), filename);
            }).catch(error => {
                console.error('Error downloading file:', error);
            });
        });
    });
</script>
</body>
</html>